{extend name='public/modal'}
{block name='content'}
<style>
    .status_ul:after {
        content: '';
        display: block;
        clear: both;
    }

    .status_ul li {
        float: left;
        border: 1px solid lightgrey;
        padding: 5px 20px;
        cursor: pointer;
        margin-left: -1px;
    }

    .status_ul li:first-child {
        margin-left: 0;
    }

    .status_ul li:hover {
        background-color: lightgrey;
    }

    .status_ul li.active {
        background-color: #009688;
        color: white;
    }

    .layui-table-cell .layui-btn-xs {
        margin-left: 0 !important;
    }
</style>
<div class="layui-fluid layui-anim layui-anim-upbit">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form action="shiporderjsonlists" class="lotus-search-form layui-form layui-col-space5"
                        method="get">
                        <input id="status" name="status" type="hidden" value="0">
                        <div class="layui-inline layui-show-xs-block">
                            <input autocomplete="off" class="layui-input" name="tc_order_no" placeholder="请输入订单号"
                                type="text">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input autocomplete="off" class="layui-input" name="contact_name" placeholder="请输入名字或身份证号码"
                                type="text">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input autocomplete="off" class="layui-input" name="user_id" placeholder="请输入用户ID"
                                type="text">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input autocomplete="off" class="layui-input" name="booking_tel" placeholder="请输入预定手机号码"
                                type="text">
                        </div>

                        <div class="layui-inline layui-show-xs-block">
                            <input autocomplete="off" class="layui-input" id="start_time" name="start_time"
                                placeholder="开船日期开始" type="text">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input autocomplete="off" class="layui-input" id="end_time" name="end_time"
                                placeholder="开船日期结束" type="text">
                        </div>

                        <div class="layui-inline layui-show-xs-block">
                            <input autocomplete="off" class="layui-input" id="voyage_date" name="voyage_date"
                                placeholder="改签日期" type="text">
                        </div>

                        <div class="layui-inline layui-show-xs-block">
                            <select name="is_pay">
                                <option value=""></option>
                                <option value="1">已支付</option>
                                <option value="0">待支付</option>
                            </select>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <select name="package">
                                <option value="-1">门票</option>
                                <option value="1">有</option>
                                <option value="0">无</option>
                            </select>
                        </div>

                        <div class="layui-inline layui-show-xs-block">
                            <a class="layui-btn lotus-search-btn" lay-filter="search" lay-submit="">
                                <i class="layui-icon">&#xe615;</i>
                            </a>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body layui-table-body layui-table-main">
                    <ul class="status_ul">
                        <li class="active" data-id="0" onclick="chooseStatus(this)">全部订单</li>
                        {foreach $ShipOrderStatus as $key => $item}
                        <li data-id="{$key}" onclick="chooseStatus(this)"
                            {$key===0?'class="active"':''}>
                            {$item}
                            {if (isset($statusCounts[$key]))}
                            <cite class="layui-badge">{$statusCounts[$key]}</cite>
                            {/if}
                        </li>
                        {/foreach}
                    </ul>
                    <table class="layui-table layui-hide"
                           id="lotus-table">
                    </table>
                    <script id="toolbarDemo" type="text/html">
                        <div class="layui-btn-container">
                            <!--                            <button class="layui-btn layui-btn-sm" onclick="xadmin.open2(' 商家退单','shiporder_tcrefund.html',70,100)">
                            <i class="layui-icon"></i>退单</button>-->
                </div>
                </script>
                <script id="island_ticket" type="text/html">
                        {{# if(d.package == 1){ }}
                        <span style="color: green">有</span>
                        {{# } else { }}
                        <span style="color: grey;">无</span>
                        {{#  } }}
                    </script>
                <script id="userInfo" type="text/html">
                        {{#  if(d.user_id && d.vip_level_text){}}
                        <span width="30">{{d.user_id}}({{d.vip_level_text}})</span>
                        {{#  } }}
                    </script>
                <script id="touristCount" type="text/html">
                        {{d.PassengersInfoCount}}
                        {{#  if(d.has_children){}}
                        <span style="color: green">有小童</span>
                        {{# } else { }}
                        <span style="color: grey"></span>
                        {{#  } }}
                    </script>
                <script id="actionTpl" type="text/html">
                        <button onclick="xadmin.open2('编辑','shiporderedit.html?id={{d.shiporder_id}}',70,100);{{toRead(d.shiporder_id)}}"
                                class="layui-btn layui-btn-xs">查看
                        </button>
                        {{# if(d.ticket_url != ''){ }}
                        <a href="{{d.ticket_url}}" class="layui-btn layui-btn-normal layui-btn-xs"
                           target="_blank">座位</a>
                        {{# } else { }}
                        <button class="layui-btn layui-btn-disabled layui-btn-xs">座位</button>
                        {{#  } }}
                        {{# if(d.status == 10 && d.tc_order_no == ''){ }}
                        <button onclick="{{shipTicket(d.shiporder_id)}}"
                                class="layui-btn layui-btn-danger layui-btn-xs">出票
                        </button>
                        {{# } else { }}
                        <button class="layui-btn layui-btn-disabled layui-btn-xs">出票</button>
                        {{#  } }}
                        {{# if(d.status == 4 || d.status == 6 || d.status == 8 || d.status == 9 || d.status == 10){ }}
                        <button onclick="{{refund(d.shiporder_id, d.refund_money)}}" class="layui-btn layui-btn-danger layui-btn-xs">
                            退款
                        </button>
                        {{# } else { }}
                        <button class="layui-btn layui-btn-disabled layui-btn-xs">退款</button>
                        {{#  } }}
                    </script>
            </div>
        </div>
    </div>
</div>
</div>
<script>
    layui.use(['laydate', 'form', 'upload', 'layer', 'jquery', 'table'], function () {
        var laydate = layui.laydate
            , table = layui.table
            , upload = layui.upload
            , layer = layui.layer
            , $ = layui.jquery
            , form = layui.form;
        form.render();

        laydate.render({
            elem: '#start_time' //指定元素
            , type: 'datetime'
        });
        laydate.render({
            elem: '#end_time' //指定元素
            , type: 'datetime'
        });
        laydate.render({
            elem: '#voyage_date', //指定元素
            type: 'date',
            format: 'yyyy-MM-dd'
        });

        table.render({
            elem: '#lotus-table',
            url: 'shiporderjsonlists',
            page: true,
            limits: [20, 50, 200, 5000],
            limit: 15,
            loading: true,
            toolbar: '#toolbarDemo',
            hash: '',
            cols: [[
                { field: 'shiporder_id', title: '操作', width: 185, templet: '#actionTpl' },
                { field: 'PassengersInfoCount', title: '乘客数量', templet: '#touristCount' },
                { field: 'line_text', title: '路线' },
                { field: 'go_time', title: '出航日期' },
                { field: 'status_text', title: '状态' },
                { templet: '#island_ticket', title: '门票' },
                { field: 'pay_type_name', title: '支付方式' },
                { field: 'booking_tel', title: '预定人手机' },
                { field: 'order_sn', title: '订单号' },
                { field: 'tc_order_no', title: '船票订单号' },
                { field: 'total', title: '订单金额' },
                { field: 'pay_time', title: '付款日期' },
                { field: 'refund_money', title: '退款金额' },
                { field: 'refund_time', title: '退款日期' },
                { templet: '#userInfo', title: '用户id' },
                { field: 'shiporder_id', title: '订单id' },
                { field: 'notify_pay_money', title: '实收金额' },
            ]],
            done: function (res, curr, count) {
                // 遍历表格当前页的所有行
                $('tr[data-index]').each(function (index, item) {
                    // 获取行数据
                    var rowData = res.data[index];
                    // 状态字段为is_read
                    if (rowData.is_read === 0) {
                        // 设置背景色
                        $(this).css('background-color', '#f5f5f5');
                        console.log('1111')
                    }
                });
            }
        });
    });
    $('.lotus-search-btn').on('click', function () {
        var where = {
            user_id: $('input[name=user_id]').val(),
            contact_name: $('input[name=contact_name]').val(),
            booking_tel: $('input[name=booking_tel]').val(),
            start_time: $('input[name=start_time]').val(),
            end_time: $('input[name=end_time]').val(),
            voyage_date: $('input[name=voyage_date]').val(),
            tc_order_no: $('input[name=tc_order_no]').val(),
            idcard: $('input[name=idcard]').val(),
            is_pay: $('select[name=is_pay]').val(),
            status: $('input[name=status]').val(),
            package: $('select[name=package]').val(),
            // page:1
        };
        lotus.table(where);
    })

    //出票
    function shipTicket(id) {
        layer.confirm('确定要出票吗?', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            $.post('ship_ticket.html', { id: id }, function (res) {
                if (res.code == 1) {
                    layer.msg(res.msg, {
                        icon: 6,
                        time: 2000
                    }, function () {
                        location.reload();
                    });
                } else {
                    layer.msg(res.msg, { icon: 5 });
                }
            });
        });
    }

    //已读状态改变
    function toRead(id) {
        $.post('/admin/shiporder/shiporderread', { id: id }, function (res) {
            $(this).css('background-color', '#fff');
        });
    }

    //退款
    function refund(id, refund_money) {
        layer.prompt(
            {
                title: "设置退款金额",
                placeHolder: "本单需退" + refund_money + "元",
                formType: 0 //输入框类型，支持0（文本）默认1（密码）2（多行文本）
            },
            function (value, index, elem) {
                if (parseFloat(value) === 0.00) {
                    layer.msg('退款金额不能为0');
                }
                layer.closeAll();
                $.post('/admin/shiporder/refund', { id, refund_money: value }, function (res) {
                    if (res.code == 1) {
                        window.parent.getNoticeNums();
                        layer.msg(res.msg, {
                            icon: 6,
                            time: 2000
                        }, function () {
                            location.reload();
                        });
                    } else {
                        layer.msg(res.msg, { icon: 5, time: 3000 });
                    }
                });
            }
        );
    }


    function chooseStatus(obj) {
        let status = $(obj).attr('data-id');
        $('.status_ul > li.active').each(function (n, i) {
            if ($(this).hasClass('active')) {
                $(this).removeClass('active')
            }
        });
        $(obj).addClass('active');
        $('#status').val(status);
        $('form').find('.lotus-search-btn').trigger('click')
    }
</script>
{/block}